<template>
  <div id="comment">
    <!-- 全部评论 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoadComment"
    >
      <van-cell v-for="(item, index) in commentsList" :key="index + '&'">
        <van-image
          slot="icon"
          class="avatar"
          round
          fit="cover"
          :src="item.user.avatarUrl"
        />
        <div slot="title" class="title-wrap">
          <div class="user">
            <div class="user-name">{{ item.user.nickname }}</div>
            <p>{{ item.time | formatDate }}</p>
          </div>
          <van-button class="like-btn" icon="good-job-o">{{
            item.likedCount | likedTotal
          }}</van-button>
        </div>

        <div slot="label">
          <p class="comment-content">{{ item.content }}</p>
          <div class="bottom-info">
            <span
              v-if="!floorCom"
              @click="
                $store.commit('comment/isShowFloorComment', {
                  flag: true,
                  id: item.commentId
                })
              "
              class="comment-pubdate"
              >{{ item.showFloorComment.replyCount + "条回复" }}
              <van-icon name="arrow"
            /></span>
            <p
              class="van-multi-ellipsis--l2"
              v-else-if="
                item.parentCommentId != item.beReplied[0].beRepliedCommentId
              "
            >
              <span class="reply">@{{ item.beReplied[0].user.nickname }}</span
              >:
              <span>{{ item.beReplied[0].content }}</span>
            </p>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCommentList, getFloorCommentList } from '@/api/comment.js'

export default {
  name: 'Comment',
  data () {
    return {
      commentsList: [], // 评论列表
      pageNo: 0, // 页码
      loading: false,
      finished: false
    }
  },
  props: {
    sortType: {
      type: Number,
      default: 1 // 按什么排序
    },
    floorCom: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      required: true
    },
    type: {
      type: Number,
      required: true
    }
  },
  created () {},
  computed: {
    ...mapGetters(['parentCommentId'])
  },
  // 定义方法
  methods: {
    async onLoadComment () {
      this.pageNo++
      var cursor = Date.now()
      var floorCursor = 0
      var res = null
      if (this.commentsList.length) {
        cursor = this.commentsList[this.commentsList.length - 1].time
        floorCursor = this.commentsList[this.commentsList.length - 1].time
      }
      try {
        if (!this.floorCom) {
          res = (await getCommentList({
            id: this.id,
            sortType: this.sortType,
            pageNo: this.pageNo,
            cursor,
            type: this.type
          })).data
          this.$emit('loadTotalCount', res.totalCount)
        } else {
          res = (await getFloorCommentList({
            parentCommentId: this.parentCommentId,
            id: this.id,
            type: this.type,
            time: floorCursor
          })).data
          if (res.ownerComment) {
            this.$emit('loadownerComment', {
              avatarUrl: res.ownerComment.user.avatarUrl,
              nickname: res.ownerComment.user.nickname,
              time: res.ownerComment.time,
              likedCount: res.ownerComment.likedCount,
              content: res.ownerComment.content
            })
          }
        }
        if (res.comments.length) {
          this.commentsList.push(...res.comments)
          this.loading = false
        } else {
          this.finished = true
        }
      } catch (err) {
        console.dir(err)
        this.loading = false
        this.finished = true
      }
    }
  },

  watch: {
    sortType () {
      this.pageNo = 0
      this.commentsList = []
      this.onLoadComment()
    }
  }
}
</script>

<style scoped lang="less">
#comment {
  padding-bottom: 53px;
  .avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .user-name {
      color: #999;
      font-size: 14px;
    }
    p {
      font-size: 12px;
      color: #ccc;
    }
  }
  .comment-content {
    font-size: 12px;
    color: #666;
    word-break: break-all;
    text-align: justify;
  }
  .comment-pubdate {
    font-size: 14px;
    color: #222;
    margin: 10px 15px 0 0;
    color: rgba(11, 61, 136, 0.753);
  }
  .bottom-info {
    display: flex;
    align-items: center;
    .reply {
      border-left: 3px rgb(196, 192, 192) solid;
      margin-top: 5px;
      padding-left: 5px;
      color: rgb(61, 99, 168);
    }
  }
  .like-btn {
    height: 30px;
    padding: 0;
    border: none;
    font-size: 14px;
    line-height: 30px;
    margin-right: 7px;
    color: #888;
    .van-icon {
      font-size: 14px;
    }
  }
}
</style>
